{% extends "journal/base.html" %}

{% block main %}
<section>
    <h1>我的邀请码</h1>
    
    <h2>可用邀请码（{{ available_codes.count }}个）</h2>
    {% if available_codes %}
    <ul class="invite-codes">
        {% for code in available_codes %}
        <li>
            <div class="code-info">
                <code>{{ code.code }}</code>
                <div class="copy-buttons">
                    <a onclick="copyText('{{ code.code }}')" class="copy-btn">复制邀请码</a>
                    <a onclick="copyText('{{ request.scheme }}://{{ request.get_host }}{% url 'register' %}?invite_code={{ code.code }}')" class="copy-btn">复制注册链接</a>
                </div>
            </div>
            <span class="created-at">创建于：{{ code.created_at|date:"Y-m-d H:i" }}</span>
        </li>
        {% endfor %}
    </ul>
    {% else %}
    <p>暂无可用的邀请码</p>
    {% endif %}
    
    <h2>已使用的邀请码（{{ used_codes.count }}个）</h2>
    {% if used_codes %}
    <ul class="invite-codes used">
        {% for code in used_codes %}
        <li>
            <code>{{ code.code }}</code>
            <span class="used-info">
                被 {{ code.used_by.nickname }} 使用于：{{ code.used_at|date:"Y-m-d H:i" }}
            </span>
        </li>
        {% endfor %}
    </ul>
    {% endif %}
</section>

<style>
    .invite-codes {
        list-style: none;
        padding: 0;
    }
    
    .invite-codes li {
        margin: 1rem 0;
        padding: 1rem;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    
    .code-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    
    .invite-codes code {
        font-size: 1.2rem;
        padding: 0.5rem;
        background: #f5f5f5;
        border-radius: 4px;
    }
    
    .copy-buttons {
        display: flex;
        gap: 0.5rem;
    }
    
    .copy-btn {
        padding: 0.25rem 0.5rem;
        background: #0d6efd;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.9rem;
    }
    
    .copy-btn:hover {
        background: #0b5ed7;
    }
    
    .invite-codes .created-at,
    .invite-codes .used-info {
        color: #666;
        font-size: 0.9rem;
        display: block;
    }
    
    .invite-codes.used li {
        background: #f8f9fa;
    }
    
    /* 复制成功提示 */
    .copy-tooltip {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        animation: fadeInOut 2s ease-in-out;
    }
    
    @keyframes fadeInOut {
        0% { opacity: 0; }
        20% { opacity: 1; }
        80% { opacity: 1; }
        100% { opacity: 0; }
    }
</style>

<script>
function copyText(text) {
    // 复制文本到剪贴板
    navigator.clipboard.writeText(text).then(() => {
        // 显示复制成功提示
        const tooltip = document.createElement('div');
        tooltip.className = 'copy-tooltip';
        tooltip.textContent = '复制成功！';
        document.body.appendChild(tooltip);
        
        // 2秒后移除提示
        setTimeout(() => {
            tooltip.remove();
        }, 2000);
    }).catch(err => {
        console.error('复制失败:', err);
        alert('复制失败，请手动复制');
    });
}
</script>
{% endblock %} 